<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <title>长江沿线码头-首页</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="stylesheets/special-style.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap-reset.css" />
    <link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="assets/data-tables/DT_bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/default.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/default-new.css" />

    <link rel="stylesheet" type="text/css" href="stylesheets/jqueryui.min.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui-slider-pips.min.css" />

    <link rel="stylesheet" type="text/css" href="stylesheets/slider.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="javascripts/common/html5shiv.js"></script>
    <script src="javascripts/common/respond.min.js"></script>
    <![endif]-->


</head>
<body class="full-width" style="min-width: 1300px;">
<section id="container" style="min-width: 1300px;">
    <!--header start-->
    
    <!--header end-->
    <!--sidebar start-->
    <aside id="sider-table" style="display: none">
        <div class="sidebar-toggle-box" id="box-toggle">
            <div data-original-title="Toggle Navigation" data-placement="right" class=" tooltips" id="drag"><span><br>搜<br>索<br>结<br>果</span></div>
        </div>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">
                <li>
                    <div class="col-lg-12" style="padding:0px;">
                        <div class="data-body">
                            <section class="panel mar-bot-0">
                                <header class="panel-heading head1">
                                    <span id="p-name">XX省XX市</span>
                                </header>
                                <div class="stat-body" style="min-height: 500px">
                                    <div class="bor-bot-radius">
                                        <div class="panel-body" style="padding: 0px">
                                            <div class="adv-table editable-table " id="table_div">
                                                <table class="table  table-bordered" id ='pierTable'>
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>&nbsp;&nbsp;名称&nbsp;&nbsp;</th>
                                                        <th>&nbsp;类型&nbsp;</th>
                                                        <th>业主</th>
                                                        <th>运营时间</th>
                                                        <th>具体位置</th>
                                                        <th>&nbsp;状态&nbsp;</th>
                                                    </tr>
                                                    </thead>
                                                     <tbody></tbody>
                                                </table>
                                          </div>
                                        </div>
                                        </div>
                                    </div>
                            </section>
                            </div>
                        </div>
                    </li>
            </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!--home page-->
        <section id="main-content">
            <!--main content start-->
            <section class="wrapper">
                <!-- page start-->
                <div class="row">
                    <div class="col-lg-12" style="padding: 0px">

                        <section class="panel mar-bot-0">
                            <div class="querymap" id="querymap" style="min-height:500px;">
                                <div class="overlay"></div>
                                <div class="showbox" style=" display:none;">
                                    <div class="loadingWord"><img src="images/loading.gif" />&nbsp;&nbsp;正在加载，请稍等．．．．．．
                                    </div>
                                </div>
                                <div class="style-change">
                                    <div class="area-list" >
                                        <a href="#"  onclick="areaChoose()">行政区域&nbsp;<i class="icon-reorder"></i></a>
                                        <div  class="list-down" style="display: none" id="quyu-list">
                                            <div id="level1" class="level-1">
                                                <div class="row">
                                                    <div class="pull-right">&nbsp;
                                                        <a href="javascript:void(0)" class="item-close">
                                                            <i class="icon-remove icon-close"></i>
                                                            &nbsp;
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="row ">
                                                    <div class="col-lg-3 pad-8"><a id="pro-1"  onclick="provinceChoose('p1', this.id)">安徽省</a></div>
                                                    <div class="col-lg-3 pad-8"><a id="pro-2"  onclick="provinceChoose('p2', this.id)">湖北省</a></div>
                                                    <div class="col-lg-3 pad-8"><a id="pro-3"  onclick="provinceChoose('p3', this.id)">湖南省</a></div>
                                                    <div class="col-lg-3 pad-8"><a id="pro-4"  onclick="provinceChoose('p4', this.id)">江西省</a></div>
                                                    <div class="col-lg-3 pad-8"><a id="pro-5"  onclick="provinceChoose('p5', this.id)">江苏省</a></div>
                                                    <div class="col-lg-3 pad-8"><a id="pro-6"  onclick="provinceChoose('p6', this.id)">重庆市</a></div>
                                                </div>
                                            </div>
                                            <div id="p1" class="level-2"  style="display: none">
                                                <div class="row ">
                                                    <!--<div class="col-lg-12"> <p>安徽省</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='340800' onclick="queryData(this.id)">安庆市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='341700' onclick="queryData(this.id)">池州市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='340500' onclick="queryData(this.id)">马鞍山市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='340700' onclick="queryData(this.id)">铜陵市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='340200' onclick="queryData(this.id)">芜湖市</a></div>
                                                </div>
                                            </div>
                                            <div id="p2" class="level-2"  style="display: none">
                                                <div class="row ">
                                                  <!--  <div class="col-lg-12"> <p>湖北省</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='422800' onclick="queryData(this.id)">恩施市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='421100' onclick="queryData(this.id)">黄冈市</a></div>
                                                </div>
                                            </div>
                                            <div id="p3" class="level-2"  style="display: none">
                                                <div class="row ">
                                                    <!--<div class="col-lg-12"> <p>湖南省</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='430600' onclick="queryData(this.id)">岳阳市</a></div>

                                                </div>
                                            </div>
                                            <div id="p4" class="level-2"  style="display: none">
                                                <div class="row ">
                                                   <!-- <div class="col-lg-12"> <p>江西省</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='360400' onclick="queryData(this.id)">九江市</a></div>

                                                </div>
                                            </div>
                                            <div id="p5" class="level-2"  style="display: none">
                                                <div class="row ">
                                                    <!-- <div class="col-lg-12"> <p>江苏省</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='320100' onclick="queryData(this.id)">南京市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='321000' onclick="queryData(this.id)">扬州市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='321100' onclick="queryData(this.id)">镇江市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='321200' onclick="queryData(this.id)">泰州市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='320200' onclick="queryData(this.id)">无锡市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='320500' onclick="queryData(this.id)">苏州市</a></div>
                                                    <div class="col-lg-3 pad-8"><a id='320600' onclick="queryData(this.id)">南通市</a></div>
                                                </div>
                                            </div>
                                            <div id="p6" class="level-2"  style="display: none">
                                                <div class="row ">
                                                    <!-- <div class="col-lg-12"> <p>重庆市</p></div>-->
                                                    <div class="col-lg-3 pad-8"><a id='500000' onclick="queryData(this.id)">重庆市</a></div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="btn-change"  onclick="initSlider();">
                                   <a ><i class="icon-calendar"></i></a>
                                </div>
                                <div class="time-slider" style="display: none">
                                    <div class="slider" ></div>
                                </div>
                             <div class="toolsDiv">
                                <div class="form-group last">
                                    <input id="search_regex" class="form-control search" placeholder="Search"
                                           type="text">
                                    <ul class="searchDiv" id="search_div" style="display: none"></ul>
                                </div>
                            </div>
                            </div>
                        </section>
                    </div>
                </div>
                <!-- page end-->
            </section>
        </section>
        <!--main content end-->
        <!--footer start-->
        <!-- <footer class="site-footer">
            <div class="text-center footer1">
                2017 &copy;SatImage
                <a href="#" class="go-top">
                <i class="icon-angle-up"></i>
            </a>
            </div>
        </footer> -->
        <!--footer end-->
    </section>
    <!-- js placed at the end of the document so the pages load faster -->

<!--<script src="javascripts/common/jquery-ui.js"></script>-->


<script src="javascripts/common/jquery.js"></script>
<script src="javascripts/common/jquery-plus-ui.min.js"></script>
<script src="javascripts/common/jquery-ui-slider-pips.js"></script>
<script src="javascripts/common/bootstrap.min.js"></script>
<script src="assets/data-tables/jquery.dataTables.js"></script>
<script src="assets/data-tables/DT_bootstrap.js"></script>
<script src="javascripts/common/jquery.dcjqaccordion.2.7.js"></script>
<script src="javascripts/common/hover-dropdown.js"></script>
<script src="javascripts/common/jquery.scrollTo.min.js"></script>
<script src="javascripts/common/jquery.nicescroll.js" type="text/javascript"></script>
<script src="javascripts/common/respond.min.js"></script>
<script src="javascripts/common/moment.js"></script>
<script src="javascripts/common/OpenLayers.js"></script>
<script src="javascripts/common/common-scripts.js"></script>

<script src="javascripts/satimage-map.js"></script>
<script src="javascripts/satimage-docks.js"></script>
<script src="javascripts/slider.js"></script>
<!-- js for toopltip -->
<script src="javascripts/common/jquery.js"></script>
<script src="javascripts/common/jquery.tooltip.js"></script>
<script type="text/javascript">
    $j = jQuery.noConflict();
</script>
<script type="text/javascript">
        var pierTable = null;
        $(document).ready(function () {
            //定义页面的高度
            $("#querymap").height($(window).height());//设置地图高度
            $(".data-body").height($(window).height());//设置表格高度
            mapObject.getInstance().initMap('querymap');

            var map = mapObject.getInstance().getMap();
            map.events.register("moveend", this, getTimeFromShp);
        });


        $('#pierTable tbody').on('click', 'tr', function (obj, e) {
            var rows = $('#pierTable')[0].rows;
            for (var i = 0; i < rows.length; i++) {
                $(rows[i]).removeClass('active');
            }

            $(this).toggleClass('active');
            var name = obj.currentTarget.childNodes[0].innerText;
            var status_name = obj.currentTarget.childNodes[6].innerText;
            var features = layerUtil.companyLayer.getFeaturesByAttribute('id', parseInt(name));
            var feature;
            if (features.length == 0){
                return;
            }else if(features.length > 1){
                for (var k = 0; k < features.length; k++) {
                    if(features[k].data.status_name == status_name){
                        feature = features[k];
                    }
                }
            }else{
                feature = features[0];
            }

            var geo = feature.geometry.getBounds();
            geo['left']=geo['left']-0.001;
            geo['bottom']=geo['bottom']-0.001;
            geo['right']=geo['right']+0.001;
            geo['top']=geo['top']+0.001;
            if (geo) {
                mapObject.getInstance().getMap().zoomToExtent(geo, false);
            }
            if (obj.target.name != 'btn_detail') {
                layerUtil.selectFeature(feature);
            }
        });
        //关键字检索触发事件添加
        $('#search_regex').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                document.getElementById('search_div').innerHTML = null;
                $('#p-name').html('模糊检索：' + $('#search_regex').val());
                openPanel();
                if ($('#search_regex').val() != null && $('#search_regex').val() != '' && $('#search_regex').val() != undefined) {
                    docksUtils.fuzzySearch();
                    $('#search_regex').addClass('searchfocus');
                    e.stopPropagation();
                } else {
                    $("#search_div").hide();
                    $('#search_regex').removeClass('searchfocus');
                }
            }
        });
//        $('#search_regex').bind('input propertychange', function (e) {
//            document.getElementById('search_div').innerHTML = null;
//            if ($('#search_regex').val() != null && $('#search_regex').val() != '' && $('#search_regex').val() != undefined) {
//                docksUtils.fuzzySearch();
//                $('#search_regex').addClass('searchfocus');
//                e.stopPropagation();
//            } else {
//                $("#search_div").hide();
//                $('#search_regex').removeClass('searchfocus');
//            }
//        });
    </script>

<script type="text/javascript">
    var area_name;
    //行政区选择
    function areaChoose(){
        $(".level-2").hide();
        $('.pro-style').removeClass();
        var level=document.getElementById("quyu-list");
        level.style.display = (level.style.display == 'none')?'block':'none';
    }
    function provinceChoose(numId, id){
        $('.pro-style').removeClass();
        area_name = document.getElementById(id).innerText;
        var cId = document.getElementById(id);
        cId.className = 'pro-style';
        $(".level-2").hide();
        var pId = document.getElementById(numId);
        pId.style.display = (pId.style.display == 'none')?'block':'none';

    }    //行政区选择关闭
    $(function(){
        $('.item-close').click(function(){
            $(this).parent().parent().parent().parent().hide();
        })
    })

    //按行政区域查询
    function queryData(id){
        $("#quyu-list").css('display','none');
        var city_name = document.getElementById(id).innerText;
        if($('#p-name').html() == area_name + city_name){
            openPanel();
            return;
        }
        $('#p-name').html(area_name + city_name);
        //获取所有码头数据
        docksUtils.getAllDocks(id);
        openPanel();
    }

    function openPanel(){
        if($('#sider-table').is(":visible")){
            styleSet();
            return;
        }else{
            styleSet();
        //表格初始化
        var table_height = $(".data-body").height() - 85;
        pierTable = $("#pierTable").DataTable({
            "bPaginate": false,//显示（使用）分页器
            "bFilter": false,//是否启用客户端过滤功能
            "bLengthChange": false,//显示一个每页长度的选择条（需要分页器支持）
            "bSort":false, //排序功能
            //"aaSorting": [[6, "asc"], [0, 'asc']],//指定按多列数据排序的依据
            "processing": true,//处理中显示
            /*"iDisplayLength": 10,//用于指定一屏显示的条数，需开启分页器
             "sPaginationType": "bootstrap",//用于指定分页器风格*/
            "bDeferRender": true,
           // "aoColumnDefs": [{ "bSortable": false, "aTargets": [2, 3] }],
            "bDestroy": true,
            "bInfo": false,
            "sScrollY": table_height,
            "bScrollCollapse": true,
            "bSelect": true,
            "bAutoWidth": true,
            "oLanguage": {//语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有数据",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmpty": "",
                "sProcessing": '<i class="fa fa-coffee"></i> 正在加载数据...',
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }

        });//结果列表初始化
        }
    }
    function styleSet(){
        $('#sider-table').css('display','block');
        $("#main-content").css('margin-right', '40%');
        $("#sidebar").css('margin-right', '0px');
        $('#box-toggle').css('right', '40%');
        $('#sidebar > ul').show();
        $("#drag").removeClass("icon-chevron-sign-left");
        $("#drag").addClass("icon-chevron-sign-right");
        mapObject.getInstance().getMap().render('querymap');
    }
    </script>

</body>

</html>